<style>
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{
        border: none;
        border-bottom: 1px solid #3498db;
    }
    .nav > li > a{
        color: #555;
    }
    .nav-tabs {
        border-bottom: 1px solid #f5f5f5;
    }
    .table > thead > tr > th {
        padding: 12px 8px 10px 8px;
    }
    .width-50 {
        width: 50px;
    }
    .width-100 {
        width: 100px;
    }
    .width-120 {
        width: 120px;
    }
    @media (max-width: 768px) {
        .panel-body {
            padding: 0;
        }
    }
</style>
<div class="container">
    <div id="content-container" class="container">
        <div class="row">
            <div class="col-md-3">
                {include file="common/sidenav" /}
            </div>
            <div class="col-md-9">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <h2 class="page-header">
                            工单管理
                        </h2>
                        <ul class="nav nav-tabs">
                            <li class="{$type == 'all' ? 'active':''}">
                                <a href="?type=all">全部</a>
                            </li>
                            <li class="{$type == 'noreply' ? 'active':''}">
                                <a href="?type=noreply">待处理</a>
                            </li>
                            <li class="{$type == 'replied' ? 'active':''}">
                                <a href="?type=replied">待反馈</a>
                            </li>
                            <li class="{$type == 'closed' ? 'active':''}">
                                <a href="?type=closed">已结单</a>
                            </li>
                        </ul>
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th class="text-center width-50">编号</th>
                                <th>标题</th>
                                <th class="text-center hidden-xs">提交用户</th>
                                <th class="text-center hidden-xs width-100">产品/服务</th>
                                <th class="text-center hidden-xs width-120">提交时间</th>
                                <th class="text-center hidden-xs width-100">状态</th>
                                <th class="text-center width-100">操作</th>
                            </tr>
                            </thead>
                            {volist name="orders" id="order" key="key" empty="<tr><td class='text-center' colspan='7'>暂时没有数据...</td></tr>"}
                            <tr>
                                <td class="text-center">{$order.id}</td>
                                <td><span class="visible-xs-inline">{$order.status.h5}</span>{$order.title|mb_substr=0,17}{$order.title|mb_strlen > 17 ? '...':''}</td>
                                <td class="text-center hidden-xs">{$order.user.nickname}</td>
                                <td class="text-center hidden-xs">{$order.category.name}</td>
                                <td class="text-center hidden-xs">{$order.createtime_text}</td>
                                <td class="text-center hidden-xs">{$order.status.pc}</td>
                                <td class="text-center">
                                    <a href="{:url('index/workorder/detail', ['id' => $order.id])}" class="btn btn-success btn-xs" data-toggle="tooltip" title="查看">查看详情</a>
                                </td>
                            </tr>
                            {/volist}
                        </table>
                        <div class="pager">{$orders->render()}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>